import React, { useState, useRef, useEffect } from 'react';
import './styles.scss';
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import rehypeRaw from "rehype-raw";
import rehypeKatex from "rehype-katex";
import remarkMath from "remark-math";
import "katex/dist/katex.min.css";
import Code from '@components/FormattedText/Code';
import renderMarkdown from "@/utils/markdown";

const FormattedText = ({ content }) => {
    const [collapsedStates, setCollapsedStates] = useState({});

    const toggleCollapse = (key) => {
        // console.log("key", key);
        // console.log("collapsedStates", collapsedStates);
        setCollapsedStates((prev) => ({
            ...prev,
            [key]: !prev[key],  // 切换对应对话条目中"深度思考"的折叠状态
        }));
    };


    if (content === "正在思考...") {
        return (
            <div
                style={{
                    display: "flex",
                    alignItems: "center",
                    gap: "8px",
                }}
            >
                正在思考
                <div className="loading-dots">
                    <span></span>
                    <span></span>
                    <span></span>
                </div>
            </div>
        );
    }

    // 检查是否包含深度思考的内容并提取
    const parts = content.split(/<think>|<\/think>/);
    if (parts.length > 1) {
        const result = [];
        let isThinking = false;

        for (let i = 0; i < parts.length; i++) {
            if (parts[i].trim()) {
                if (!isThinking) {
                    // 普通内容
                    // console.log("parts[i]", parts[i]);、
                    result.push(
                        <ReactMarkdown
                            key={`text-${i}`}
                            remarkPlugins={[remarkGfm, remarkMath]}
                            rehypePlugins={[rehypeRaw, rehypeKatex]}
                            components={{
                                code: Code
                            }}
                        >
                            {parts[i]}
                        </ReactMarkdown>
                    );
                } else {
                    // 深度思考内容
                    result.push(
                        <div className="think-block" key={`think-${i}`}>
                            <div className="think-header" 
                                onClick={() => toggleCollapse(`thinking-${i}`)}
                                title={collapsedStates[`thinking-${i}`] ? '点击展开' : '点击折叠'}>
                                <div className="think-title">
                                    <i className="ri-lightbulb-line" style={{ marginRight: '4px' }} />
                                    深度思考
                                </div>
                                {collapsedStates[`thinking-${i}`] ?<i className="ri-arrow-down-s-line"/> : <i className="ri-arrow-up-s-line" />}
                                {/* <i
                                    className="ri-arrow-up-s-line"
                                    iscollapsed={collapsedStates[`thinking-${i}`]}
                                /> */}
                            </div>
                            <div className={`think-content`}
                                style={{
                                    marginTop: collapsedStates[`thinking-${i}`] ? '0px' : '8px',
                                    height: collapsedStates[`thinking-${i}`] ? '0px' : 'auto',
                                    overflow: 'hidden',
                                    transition: 'all 0.3s ease'
                                }}
                            >
                                <ReactMarkdown
                                    remarkPlugins={[remarkGfm, remarkMath]}
                                    rehypePlugins={[rehypeRaw, rehypeKatex]}
                                    components={{
                                        code: Code
                                    }}
                                >
                                    {parts[i]}
                                </ReactMarkdown>
                            </div>
                        </div>
                    );
                }
            }
            isThinking = !isThinking;
        }

        return <>{result}</>;
    }

    return (
        
    //     <span
    //     dangerouslySetInnerHTML={{
    //       __html: renderMarkdown(content),
    //     }}
    //   />
        // renderMarkdown(content)
        <ReactMarkdown
            remarkPlugins={[remarkGfm, remarkMath]}
            rehypePlugins={[rehypeRaw, rehypeKatex]}
            components={{
                code: Code
            }}
        >
            {content}
        </ReactMarkdown>
    );
}

export default FormattedText;